<!--
 * @Description:
 * @Version:
 * @Autor: ps
 * @Date: 2022-09-08 11:43:43
 * @LastEditors: ps
 * @LastEditTime: 2022-09-13 09:23:46
-->
<template>
  <div
    class="title-wrap"
    :class="[!line ? 'no-line' : '', noLineHeight ? 'no-line-padding' : '']"
  >
    <div v-if="name" class="title-info">
      <div class="name">
        <em v-if="required">*&nbsp;&nbsp;</em>{{ name }}
        <slot name="tip"></slot>
      </div>
      <div class="right">
        <slot name="append"></slot>
      </div>
    </div>
    <div
      v-if="needcontainer"
      class="title-container"
      :class="!name ? 'no-container' : ''"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    line: {
      type: Boolean,
      default: true,
    },
    noLineHeight: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
    needcontainer: {
      type: Boolean,
      default: true,
      require: false,
    },
  },
};
</script>
<style lang="scss" scoped>
.title-wrap {
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e1e2e5;
  overflow: hidden;
  background: #fff;
  // margin-bottom: 16px;
  zoom: 1;
  line-height: 20px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  // height: 20px;
  .title-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #c4cdd5;
    height: 40px;
    line-height: 40px;
    position: relative;
    div.name {
      margin: 0 auto;
      font-size: 16px;
      color: #122533;
      font-weight: bold;
      em {
        font-style: normal;
        color: #ec6324;
      }
    }
    .right {
      position: absolute;
      right: 10px;
    }
  }

  .title-container {
    padding: 16px;
  }

  .no-container {
    padding-top: 0;
  }
}

.title-wrap.no-line {
  border-bottom: 0 none;
}

.title-wrap.no-line-padding {
  margin-bottom: 0;

  .title-container {
    padding: 0;
  }
}

.title-wrap:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
</style>
